<template>
  <div>
    <song
      v-for="(el,idx) in hot_song"
      :key="el.id"
      :song_data="{
            song_name:el.name,
            ars:el.ar,
            album_name:el.al.name,
            idx:idx+1,
            id:el.id
          }"
      :id_list="id_list"
      :idx="idx"
    ></song>
  </div>
</template>

<script>
import { get_hotsong } from "../../api/rank.js";
import song from "../../components/song";
export default {
  data() {
    return {
      hot_song_all: [],
      render_length: 30,
    };
  },
  components: {
    song,
  },
  created() {
    get_hotsong().then((res) => {
      // console.log(res.data.playlist.tracks);
      this.hot_song_all = res.data.playlist.tracks;
    });
  },
  computed: {
    // 使用计算属性来限制渲染的数据长度
    hot_song() {
      return this.hot_song_all.slice(0, this.render_length);
    },
    id_list() {
      return this.hot_song.map((el) => el.id);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>